import { useState, useEffect } from 'react';
import { Space, Tag, Pagination,Table, Button, Modal, Form, Input, message } from 'antd';
import { getTeacher,postTeacher } from '../../api/news';

const { CheckableTag } = Tag;


  
 
const App = () => {
    const [isModalOpen, setIsModalOpen] = useState(false);
    const [teacherList,setTeacherList]=useState([]);
    const showModal = () => {
        setIsModalOpen(true);
    };
    const handleCancel = () => {
        setIsModalOpen(false);
    };
   const deleteTeacher=(e,record)=>{
    console.log(record)
   }
    // const [selectedTags, setSelectedTags] = useState('');
    // const [news, setNews] = useState([]);
    // // const [total, setTotal] = useState(0);
    // // const [page, setPage] = useState(1);

    useEffect(() => {
        getTeacher()
            .then(res => {
                console.log(res,"teacher");
           
                setTeacherList(res)
                // setTotal(res.data.totalElements);
            })
    }, [])
    const onFinish = (values)=>{
      postTeacher({...values})
          .then(res=>{
              console.log(res)
              setTeacherList([...teacherList,{...values}])    
              
              setIsModalOpen(false);
              message.success('新增成功')
           
              
          })
        
  }
  const columns = [
    {
      title: '教工号',
      dataIndex: 'tid',
      key: 'tid',
    },
    {
      title: '姓名',
      dataIndex: 'tname',
      key: 'tname',
    },
    {
      title: '所属学院',
      dataIndex: 'subject',
      key: 'subject',
    },
    {
        title: 'Action',
        key: 'action',
        render: (_, record) => (
          <Space size="middle">
            <a onClick={showModal}>修改</a>
            <a  onClick={(e)=>deleteTeacher(e,record)}>删除{record.tid}</a>
          </Space>
        ),
      },
  ];

    return (
        <>
            <div>
            <Button
                type="primary"
                onClick={showModal}
            >
                新增教师
            </Button>
            </div>
            <Table dataSource={teacherList} columns={columns} />;
            <Modal
                title="新增投稿"
                open={isModalOpen}
                footer={null}
                onCancel={handleCancel}
            >
                <Form
                    name="basic"
                    layout='vertical'
                    // style={{ width: 400, margin: '50px auto' }}
                    onFinish={onFinish}
                    autoComplete="off"
                >
                    <Form.Item
                        label="教工号"
                        name="tid"
                        rules={[
                            {
                                required: true,
                                message: '请输入教工号',
                            },
                        ]}
                    >
                        <Input />
                    </Form.Item>

                    <Form.Item
                        label="姓名"
                        name="tname"
                        rules={[
                            {
                                required: true,
                                message: '请输入教师姓名',
                            },
                        ]}
                    >
                        <Input />
                    </Form.Item>
                    <Form.Item
                        label="学院"
                        name="subject"
                        rules={[
                            {
                                required: true,
                                message: '请输入教师所属学院',
                            },
                        ]}
                    >
                        <Input />
                    </Form.Item>
                    <Form.Item
                        label="密码"
                        name="password"
                        rules={[
                            {
                                required: true,
                                message: '请输入设定密码',
                            },
                        ]}
                    >
                        <Input.Password />
                    </Form.Item>
                    <Form.Item>
                        <Button
                            block
                            shape='round'
                            type="primary"
                            htmlType="submit"
                        >
                            新增教师
                        </Button>
                    </Form.Item>
                </Form>
            </Modal>
        </>
    );
};
export default App;